<template>
  <div class="page J-coupon">
    <div class="coupon-list">
      <get-data :scroller-data="getCouponList" :config="config" ref="scroller" :type="type">
        <div class="coupon" v-for="item in getCouponList.data">
          <div class="weui-flex mp pl line-bottom">
            <div class="weui-flex__item pl">
              <div class="status" :class="{status_1:item.status==0,status_2:item.status==1,status_3:item.status==2}"><span>{{item.status==0?'未使用':item.status==1?'已使用':item.status==2?'已过期':''}}</span></div>
              <div class="coupon_ coupon_first">
                <div class="coupon_text">{{item.quanName}}</div>
                <div class="coupon_data">有效期:{{item.validTime}}</div>
              </div>
              <div class="coupon_">
                <div class="coupon_yh">订单金额满{{item.limitPrice | parseInt}}元可用</div>
                <div class="coupon_mz">{{item.gasstation}}</div>
              </div>
            </div>
          </div>
        </div>
      </get-data>
      <no-data :title="title" v-if='isData'></no-data>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import GetData from '~components/mixins/getData.vue'
  import NoData from '~components/mixins/no-data.vue'
  export default {
    name: 'coupon',
    data () {
      return {
        isData: false,
        type: 'getCouponList',
        title: '暂时找不到优惠劵',
        config:{
          page:'1'
        }
      }
    },
    computed: {
      ...mapGetters({
        getCouponList: 'getCouponList'
      })
    },
    components: {
      NoData,
      GetData
    },
    mounted () {
      var _this = this
      if (_this.getCouponList.data.length == 0 || _this.getCouponList.code == '404') {
        _this.$refs.scroller.getData('-1')
      } else {
        this.isData = false
      }
    }
  }
</script>
<style lang="scss">
  .J-coupon {
    .coupon-list,.scroller{
      height:100%;
    }
    .no-data-text.active{
      background-color: #f8f8f8 !important;
    }
    .status_1{
      border-top: 42px solid #009900;
    }
    .status_2{
      border-top: 42px solid #eee;
      span{
        color: #9a9797 !important;
      }
    }
    .status_3{
      border-top: 42px solid red;
    }
    .status{
      width: 0;
      height: 0;
      border-right: 42px solid transparent;
      position: absolute;
      left:-15px;
      top:-10px;
      span{
        display: block;
        width:42px;
        height:42px;
        position: absolute;
        top:-42px;
        text-align: center;
        font-size:10px;
        line-height: 26px;
        color:#fff;
        transform:rotate(-45deg);
      }
    }
    .mp{
      margin:15px 15px 0;
    }
    .weui-flex{
      padding:10px 15px;
      background-color:#fff;
    }
    .coupon_text{
      font-size:18px;
      overflow: hidden;
      width:150px;
      text-overflow:ellipsis;
      white-space:nowrap;
      color:#333;
    }
    .coupon_data{
      font-size:12px;
      color:red;
      white-space:nowrap;
    }
    .coupon_first{
      float:left;
    }
    .coupon_yh{
      font-size:14px;
      margin-top:5px;
      text-align: right;
      color:#868686
    }
    .coupon_mz{
      font-size:12px;
      margin-top:6px;
      text-align: right;
      color:#009900
    }
  }
</style>
